<template>
  <div class="container flex-column">
    <div class="tool-box  flex-between">
      <div class="left flex-column">
        <div class="flex-box">
          <div class="flex-box">
            <span>客户名称</span>
            <el-input type="text" v-model="query.customerName"></el-input>
          </div>
          <div class="flex-box ml-20">
            <span>地区</span>
            <el-select v-model="query.regionCode" @change="deviceTypeChange" placeholder="请选择">
              <el-option
                v-for="item in regionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </div>
          <div class="flex-box ml-20">
            <span>设备类型</span>
            <el-select v-model="query.deviceTypeCode" @change="deviceTypeChange" placeholder="请选择">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </div>
        </div>
       <div class="flex-box mt-20" style="margin-left: 0">
         <span>创建时间</span>
         <el-date-picker
           v-model="query.daterange"
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           type="daterange"
           range-separator="至"
           start-placeholder="开始时间"
           end-placeholder="结束时间">
         </el-date-picker>
       </div>
      </div>
      <div class="right flex-column">
        <div class="flex-box">
          <el-button plain icon="el-icon-tickets" @click="exprotClick">同比环比分析</el-button>
          <el-button plain icon="el-icon-tickets" @click="productTypeShow">设备类型分析</el-button>

        </div>
        <div class="flex-box mt-20">
          <el-button plain icon="el-icon-download" @click="exprotClick">导出</el-button>
          <el-button plain icon="el-icon-search" @click="page.currentPage = 1;onLoad(page)">搜索</el-button>
          <el-button plain  type="danger" icon="el-icon-delete" @click="searchReset">清空</el-button>
        </div>

      </div>
    </div>
    <div class="m-table" style="height: 260px">

      <el-table header-cell-class-name="table-header"
                v-loading="loading"
                :data="data" stripe
                style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户名称"
        >
        </el-table-column>
        <el-table-column
          prop="regionName"
          label="区域"
        >
        </el-table-column>
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
        >
        </el-table-column>
        <el-table-column
          prop="deviceCode"
          label="类型"
        >
        </el-table-column>
        <el-table-column
          prop="contractPrice"
          label="合同价"
        >
        </el-table-column>
        <el-table-column
          prop="includTaxPrice"
          label="含税价"
        >
        </el-table-column>
        <el-table-column
          prop="actualPrice"
          label="实际产值"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>

      </el-table>
      <div class="page">
        <el-pagination
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
    <div class="m-table charts" id="cus-charts">

    </div>
    <product-type-modal ref="product"></product-type-modal>
  </div>
</template>
<script>
  import {getList,regionList,deviceTypeList,getCustomerChart} from "../../api/platform/customerdatatable";
  import {barOption} from "../../config/chartOption";
  import _ from 'lodash'
  import * as echarts from 'echarts'
  import productTypeModal from './custom-components/product-type-modal'
  import {getToken} from "../../util/auth";

  const seriesList = (name, type, color, data)=>{
    return {
      name: name,
      type: type,
      barGap: "30%",
      barCategoryGap: "40%",
      data: data,
      smooth: true,
      symbol: "circle",
      symbolSize: 9,
      emphasis: {
        focus: "series",
      },
      itemStyle:
        type === "bar"
          ? {
            barBorderRadius: [40, 40, 0, 0],
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `rgba(${color}, 1)`,
                },
                {
                  offset: 1,
                  color: `rgba(${color}, 0)`,
                },
              ]);
            },
          }
          : {
            color: `rgba(${color}, 1)`,
            borderWidth: 3,
            borderColor: "#f3f3f3",
          },

    }
  }
  export default {
    name:'customerdatatable',
    data(){
      return{
        query:{},
        loading: true,
        page: {
          pageSize: 4,
          currentPage: 1,
          total: 0
        },
        data: [],
        deviceTypeList:[],
        regionList:[],
        chart:null
      }
    },
    components:{productTypeModal},
    methods:{
      productTypeShow(){
        this.$refs.product.showModal(this.query)
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page)
      },
      getregionList(){
        regionList().then(res=>{
          this.regionList = res.data.data
        })
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      onLoad(page) {
        this.loading = true;
        let params = {}
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startTime = this.query.daterange[0]
          params.endTime = this.query.daterange[1]
        }
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
        getCustomerChart(this.query).then(res=>{
          this.setOption(res.data.data)
        })
      },
      setOption(data){
        let option = _.cloneDeep(barOption),xAxis = [],tYearData = [],lYearData = [],rateData=[],legend = [];
        option.yAxis[0].name = '实际产值'
        option.yAxis.push({
          type:'value',
          name:'变化率'
        })
        data.forEach((o,i)=>{
          if(!legend.length){
            legend.push(o.thisYear.toString())
            legend.push(o.lastYear.toString())
            legend.push('变化率')
          }
          xAxis.push(o.monthValue+'月');
          tYearData.push(o.thisYearActualPrice)
          lYearData.push(o.lastYearActualPrice)
          rateData.push(o.rateOfChange)
        })
        option.legend.data = legend;
        option.xAxis.data = xAxis;
        option.series = [
          seriesList(legend[0],'bar','98, 171, 252',tYearData),
          seriesList(legend[1],'bar','89, 206, 117',lYearData),
          seriesList('变化率','line','2, 189, 211',rateData
          )
        ]
        this.chart.setOption(option,true)
        this.$nextTick(()=>{
          this.chart.resize()

        })
      },
      exprotClick(){
        let url = `/api/blade-platform/customerData/export?blade-auth=${getToken()}&customerName=${this.query.customerName}&regionCode=${this.query.regionCode}&deviceTypeCode=${this.query.deviceTypeCode}`
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          url+=`&startTime=${this.query.daterange&&this.query.daterange[0]}&endTime=${this.query.daterange&&this.query.daterange[1]}`
        }
        window.open(url);
      },
      getDevType(){
        deviceTypeList().then(res=>{
          const data = res.data.data;
          this.deviceTypeList = data
        })
      },
    },
    mounted() {
      this.onLoad(this.page)
      this.getDevType()
      this.getregionList()
      this.chart = this.$echarts.init(
        document.getElementById(`cus-charts`)
      )
    }
  }
</script>
<style scoped lang="scss">
  .m-table{
    flex: none;
  }
  .charts{
    flex: 1;
    height: 0;
  }
</style>
